<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-22 01:23
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <perfect-scrollbar class="x-render-scrollarea x-render-main-content">
    <x-render-form
      v-model="xDesignForm.formData"
      :form-options="xDesignForm.formOptions"
      :form-props="xDesignForm.formPropsData"
    >
      <template v-slot:form-body="{ activeFormOptions }">
        <x-render-draggable
          :current-id="xDesignForm.currentId"
          :form-data="xDesignForm.formData"
          :list="activeFormOptions"
          :component="xDesignForm.getComponent"
          @add="designAddHandler($event, xDesignForm.formOptions)"
          @end="designMoveEndHandler($event, xDesignForm.formOptions)"
          @copy="designCopyHandler"
          @remove="designRemoveHandler"
          @selected="designSelectedHandler"
          @data-change="dataChangeHandler"
        >
        </x-render-draggable>
      </template>
    </x-render-form>
  </perfect-scrollbar>
</template>

<script>
import XRenderDesignMixin from '../../../../../libs/XRenderMixins/XRenderDesignMixin'

export default {
  name: 'XRenderMainContent',
  mixins: [XRenderDesignMixin],
  methods: {
    dataChangeHandler(list) {
      const formOptions = this.xDesignForm.formOptions
      formOptions.splice(0, formOptions.length, ...list)
    }
  }
}
</script>

<style lang="css" scoped>
/* 中间区域 */
.x-render-main-content {
  padding: 15px;
}

/* 表单样式 */
.x-render-main-content .x-render-form {
  border: 1px dashed #dcdfe6;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
}

/* 滚动区域 */
.x-render-scrollarea {
  /* 减去头部的高度 */
  height: calc(100% - 60px);
}

/deep/ .ant-form-item {
  margin: 18px 0 0 0 !important;
}
</style>
